<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let cur = 0; // 当前被选中的
      // let selectedIndex = 0; // 此次选中的index
      // 渲染的列表
      let beSelectKV = {
        1: {
          key: 1,
          display: false,
          selectedState: false,
        },
        2: {
          key: 2,
          display: false,
          selectedState: false,
        },
        3: {
          key: 3,
          display: false,
          selectedState: false,
        },
      };

      function commandSelectFunc(selectedIndex, cur) {
        console.log(JSON.parse(localStorage.getItem("beSelectKV")));
        // localStorage.removeItem('beSelectKV')
        cur = localStorage.getItem("cur") || 1;
        beSelectKV = localStorage.getItem("beSelectKV")
          ? JSON.parse(localStorage.getItem("beSelectKV"))
          : beSelectKV;
        // 跳转到当前的状态栏
        // 或者直接选中当前状态栏状态
        // cur 1 2 3
        console.log(cur, selectedIndex);
        if (cur == selectedIndex) {
          // 如果选中当前，需要取反
          debugger;
          beSelectKV[cur].display = !beSelectKV[cur].display;
        } else {
          // 选的不是当前的，就让其进行展示，获取选中状态
          beSelectKV[selectedIndex].display = true;
        }
        // 激活当前选中的状态栏选择态
        cur = selectedIndex;
        localStorage.setItem("cur", cur);
        handleSelect(selectedIndex);
      }

      function handleSelect(selectedIndex) {
        Object.keys(beSelectKV).forEach((k) => {
          // 只有当前选中的item 的激活态为true
          // 其他item 的激活态为 false
          if (k !== selectedIndex) {
            beSelectKV[k].selectedState = false;
          } else {
            beSelectKV[k].selectedState = true;
          }
        });
        localStorage.setItem("beSelectKV", JSON.stringify(beSelectKV));

        render(beSelectKV);
      }
      const div = document.createElement("div");
      function render(beSelectKV) {
        Object.keys(beSelectKV).forEach((key) => {
          const item = beSelectKV[key];
          const div = document.createElement("div");
          console.log(item);
          // div.style.display = item.display;
          // div.style.width = 200 + "px";
          // div.style.height = 200 + "px";
          // div.style.background = `#ffff${key * 2}${key * 2}`;

          div.style = JSON.stringify({
            display:item.display,
            width:200+"px",
            height:200+"px",
            background:`#ffff${key * 2}${key * 2}`
          })

          // 模版字符串传入动态参数
          // div.style = `display=${item.display};width=200px;height=200px`

          if (item.selectedState) {
            div.style.background = "cyan";
          }
          div.innerText = key;
          document.body.appendChild(div);
        });
      }

      const res = window.prompt();
      commandSelectFunc(res, cur);
    </script>
  </body>
</html>
